<template>
  <div>
    <myHeader signin-up='msite'>
      <router-link :to="'/search/geohash'" class="link_search" slot="search">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <circle cx="8" cy="8" r="7" stroke="rgb(255,255,255)" stroke-width="1" fill="none"/>
          <line x1="14" y1="14" x2="20" y2="20" style="stroke:rgb(255,255,255);stroke-width:2"/>
        </svg>
      </router-link>
      <router-link to="/home" slot="msite-title" class="msite_title">
        <span class="title_text ellipsis">{{msiteTitle}}</span>
      </router-link>
    </myHeader>
    <nav class="msite_nav">
      <div class="swiper-container" v-if="foodTypes.length">
        <div class="swiper-wrapper">
          <div v-for="(item, index) in foodTypes" :key="index" class="swiper-slide food_types_container">
            <div v-for="foodItem in item" :key="foodItem.id" class="link_to_food">
              <figure>
                <img :src="imgBaseUrl + foodItem.image_url">
                <figcaption>{{foodItem.title}}</figcaption>
              </figure>
            </div>
          </div>
        </div>
      </div>
      <img src="static/image/fl.svg" class="fl_back animation_opactiy" v-else>
    </nav>
    <div class="shop_list_container">
      <header class="shop_header">
        <svg class="shop_icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shop"></use>
        </svg>
        <span class="shop_header_title">附近优惠</span>
      </header>
      <shopList v-if="hasPostion" :geohash="geohash"></shopList>
    </div>
    <myFootGuide></myFootGuide>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import myHeader from '@/components/common/header/header'
  import myFootGuide from '@/components/common/footer/footGuide'
  import alertTip from '@/components/common/alertTip'
  import shopList from '@/components/common/list/shoplist'
  import axios from 'axios'
  import {apiGetFoodTypes} from '@/service/apiMSite'
  import Swiper from 'swiper/dist/js/swiper.js';
  import 'swiper/dist/css/swiper.min.css';
  export default {
    data() {
      return {
        geohash: '',                     // city页面传递过来的地址geohash
        msiteTitle: '请选择地址...',     // msite页面头部标题
        foodTypes: [],               // 食品分类列表
        imgBaseUrl: 'https://fuss10.elemecdn.com', //图片域名地址
      }
    },
    components: {
      myHeader,
      myFootGuide,
      alertTip,
      shopList
    },
    computed: {
      ...mapGetters([
        'postionInf'
      ]),
      hasPostion: function() {
        return this.postionInf.hasPostion;
      }
    },
    mounted() {
      if (!this.$route.query.geohash) {
        this.$store.dispatch('getPosition');  // 异步获取地理位置
      } else {
        this.geohash = this.$route.query.geohash;
      }
    },
    methods: {
      // 解码url地址，求去restaurant_category_id值
      getCategoryId(url) {
        let urlData = decodeURIComponent(url.split('=')[1].replace('&target_name',''));
        if (/restaurant_category_id/gi.test(urlData)) {
          return JSON.parse(urlData).restaurant_category_id.id
        } else {
          return ''
        }
      }
    },
    watch: {
      hasPostion: function(val, oldVal) {
        if (val === true) {
          console.log("postionInf3:", this.postionInf);
          this.geohash = this.postionInf.lat + ',' + this.postionInf.lng;
          this.msiteTitle = 
            this.postionInf.district +
            this.postionInf.street +
            this.postionInf.streetNumber;
          console.log("this.geohash:", this.geohash);
          console.log("this.msiteTitle:", this.msiteTitle);
          apiGetFoodTypes(this.geohash).then(res => {
            console.log("res.data:", res.data);
            let resLength = res.data.length;
            let resArr = [...res.data]; // 返回一个新的数组
            let foodArr = [];
            for (let i = 0, j = 0; i < resLength; i += 8, j++) {
              foodArr[j] = resArr.splice(0, 8);
            }
            this.foodTypes = foodArr;
            console.log("foodTypes:", this.foodTypes);
            console.log("foodTypes.length:", this.foodTypes.length);
          }).then(() => {
            //初始化swiper
            new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              loop: true
            });
          });
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';
  .link_search{
    left: .8rem;
    @include wh(.9rem, .9rem);
    @include ct;
  }
  .msite_title{
    @include center;
      width: 60%;
      color: #fff;
      text-align: center;
      margin-left: -0.5rem;
      .title_text {
        @include sc(0.8rem, #fff);
        text-align: center;
        display: block;
      }
  }
  .msite_nav{
    padding-top: 2.1rem;
    background-color: #fff;
    border-bottom: 0.025rem solid $bc;
    height: 10.6rem;
    .swiper-container{
      @include wh(100%, auto);
      padding-bottom: 0.6rem;
      .swiper-pagination{
        bottom: 0.2rem;
      }
    }
    .fl_back{
      @include wh(100%, 100%);
    }
  }
  .food_types_container{
    display:flex;
    flex-wrap: wrap;
    .link_to_food{
      width: 25%;
      padding: 0.3rem 0rem;
      @include fj(center);
      figure{
        img{
          margin-bottom: 0.3rem;
          @include wh(1.8rem, 1.8rem);
        }
        figcaption{
          text-align: center;
          @include sc(0.55rem, #666);
        }
      }
    }
  }
  .shop_list_container{
    margin-top: .4rem;
    border-top: 0.025rem solid $bc;
    background-color: #fff;
    .shop_header{
      .shop_icon{
        fill: #999;
        margin-left: 0.6rem;
        vertical-align: middle;
        @include wh(0.6rem, 0.6rem);
      }
      .shop_header_title{
        color: #999;
        @include font(0.55rem, 1.6rem);
      }
    }
  }
</style>